<template>
  <div v-if="dialogVisible">
    <el-dialog :title="`${isEdit ? '编辑' : '新增'}职位`" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" :before-close="close">
      <div>
        <el-form ref="RefForm" :model="formData" label-width="100px" :validate-on-rule-change="false" :rules="formRules" status-icon>
          <!-- <el-form-item label="所属部门" prop="departmentId">
          <el-select v-model="formData.departmentId" style="width: 100%;" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          </el-form-item>-->
          <el-form-item label="职位名称" prop="jobTitle">
            <el-input v-model="formData.jobTitle" maxlength="20" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="职位编码" prop="jobCode">
            <el-input v-model="formData.jobCode" maxlength="20" show-word-limit></el-input>
          </el-form-item>

          <el-form-item label="备注">
            <el-input v-model="formData.remark" maxlength="200" show-word-limit type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { department, getJobMaxId } from '@/api/api'
  import { eleValidator } from '@/utils/tools'
  export default {
    mixins: [dialogEditMixin],
    data() {
      return {
        options: [],
        // optionsName: [
        //   { label: '施工队员', value: '施工队员' },
        //   { label: '施工队长', value: '施工队长' },
        //   { label: '科室人员', value: '科室人员' },
        //   { label: '其他管理部门', value: '其他管理部门' },
        //   { label: '生产部长', value: '生产部长' },
        //   { label: '安监部长', value: '安监部长' },
        //   { label: '副总经理', value: '副总经理' },
        //   { label: '总经理', value: '总经理' },
        //   { label: '董事长', value: '董事长' },
        //   { label: '上级检查部门', value: '上级检查部门' },
        // ],
        formRules: {
          jobTitle: [
            { required: true, message: '请输入职位名称', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: '职位名称不能为空' },
                { rule: 'isRepeat', msg: { value: '职位名称重复', url: '/Job/Exists', key: 'jobTitle' } }
              ]),
              trigger: 'blur'
            }
          ]
        }
      }
    },
    watch: {
      dialogVisible: function (newValue, oldValue) {
        if (newValue) {
          return
        }
        this.formData = {
          departmentId: '',
          jobCode: '',
          jobTitle: '',
          remark: ''
        }

        this.$refs.RefForm.clearValidate()
      }
    },
    mounted() { },
    methods: {
      // 编辑数据处理
      responseDataHandleProgram(res) {
        let formKeys = Object.keys(this.formData)
        formKeys.forEach(item => {
          this.formData[item] = res.data[item]
        })
        // 编辑时保存ID
        this.formData.id = res.data.id
        if (res.data.department) {
          this.formData.departmentId = res.data.department.id
        }
      },
      async getMaxJobId() {
        var res = await getJobMaxId()
        var code = res.data + 1

        this.formData.jobCode = ('' + code).padStart(3, 0)
      },
      resetFormData() {
        this.formData = {
          departmentId: '',
          jobCode: '',
          jobTitle: '',
          remark: ''
        }
      },
      async getDepartmentList() {
        this.getMaxJobId()
        let obj = { pageIndex: 1, pageSize: 1e8 }
        const result = await department('post', obj, false)
        if (result.code === 200) {
          this.options = []
          result.data.items.forEach(item => {
            this.options.push({
              label: item.deptName,
              value: item.id
            })
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped></style>
